<template>
	<view>
		<uni-section title="图" sub-title="" type="line">
			<view class="img">
				<image :src="`http://localhost:8090${data.icon}`" mode="scaleToFill"></image>
			</view>
		</uni-section>
		<uni-section title="名称" sub-title="" type="line">
			<text>{{ data.name }}</text>
		</uni-section>
		<uni-section title="类别" sub-title="" type="line">
			<text>{{ data.type }}</text>
		</uni-section>
		<uni-section title="价格" sub-title="" type="line">
			<text>{{ data.price }}</text>
		</uni-section>
		<uni-section title="描述" sub-title="" type="line">
			<text>{{ data.description }}</text>
		</uni-section>
		<view class="footer">
			<uni-easyinput v-model="inputComment" placeholder="请输入评论内容" />
			<button type="default" size="mini" @click="sendComment">发表</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: {},
				inputComment: '',
				foodId: 0
			};
		},
		methods: {
			sendComment() {
				if (!this.inputComment) {
					uni.showToast({
						icon: 'error',
						title: '输入框内容为空'
					});
					return;
				}
				let user = uni.getStorageSync('user');
				if (user) {
					user = JSON.parse(user);
				} else {
					uni.showToast({
						icon: 'error',
						title: '请先登录'
					});
					return;
				}

				uni.request({
					url: 'http://localhost:8090/foodapp/comment/addone',
					method: 'POST',
					data: {
						foodid: this.foodId,
						userid: user.id,
						comment: this.inputComment,
						postdate: this.getCurrentDate()
					},
					success: res => {
						if (res.data.success) {
							this.inputComment = ''
							uni.showToast({
								icon: 'success',
								title: '发表评论成功'
							});
						} else {
							uni.showToast({
								icon: 'error',
								title: '发表评论失败'
							});
						}
					}
				});
			},
			getCurrentDate() {
				let date = new Date();
				let year = date.getFullYear();
				let month = date
					.getMonth()
					.toString()
					.padStart(2, 0);
				let day = date
					.getDate()
					.toString()
					.padStart(2, 0);
				return `${year}-${month}-${day}`;
			}
		},
		onLoad(e) {
			this.foodId = e.foodId;
			uni.request({
				url: 'http://localhost:8090/foodapp/food/findone',
				method: 'POST',
				data: {
					id: this.foodId
				},
				success: res => {
					if (res.data.success) {
						this.data = res.data.data;
						console.log(this.data);
					}
				}
			});
			uni.onTabBarMidButtonTap(function(e) {
				console.log(e);
			});
		}
	};
</script>

<style>
	image {
		width: 100%;
		height: 100%;
	}

	.img {
		width: 100%;
		height: 300rpx;
	}

	.footer {
		background-color: white;
		display: flex;
		flex-direction: row;
		position: fixed;
		height: 64rpx;
		width: 100%;
		bottom: 0;
		left: 0;
	}
</style>
